<template>
  <el-dialog v-model="dialogVisible" width="80%" >
    <el-form ref="formRef" class="mb" :model="queryParams" :inline="true" label-width="68px">
      <el-form-item label="产品编号" prop="productNumber">
        <el-input
          clearable
          @keyup.enter="handleQuery"
          v-model="queryParams.productNumber"
          disabled
        />
      </el-form-item>
      <el-form-item label="部件类型" prop="partType">
        <el-input
          clearable
          @keyup.enter="handleQuery"
          v-model="queryParams.partType"
          disabled
        />
      </el-form-item>
			<el-form-item label="图纸图号" prop="drawingNumber">
        <el-input
          clearable
          @keyup.enter="handleQuery"
          v-model="queryParams.drawingNumber"
          placeholder="请输入图纸图号"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery" type="primary">搜索</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    
    <el-table
      border
      v-loading="formLoading"
      ref="multipleTableRef"
      :data="list"
			height="400"
			row-key="sourceId"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" fixed  reserve-selection/>
      <el-table-column label="图纸图号" align="left" prop="drawingNumber" />
      <el-table-column label="部件编号" align="left" prop="customerCode" />
      <el-table-column label="部件名称" align="left" prop="productNumber" />
      <el-table-column label="规格" align="left" prop="specification" />
      <el-table-column label="内作" align="left" prop="dictInternalWork" >
				<template #default="scope">
          <dict-tag type="is_machining" :value="scope.row.dictInternalWork" />
        </template>
      </el-table-column>
      <el-table-column label="外协" align="left" prop="dictOutsourcing" >
				<template #default="scope">
          <dict-tag type="is_machining" :value="scope.row.dictOutsourcing" />
        </template>
      </el-table-column>
      <el-table-column label="外购" align="left" prop="dictOutsidePurchase" >
        <template #default="scope">
          <dict-tag type="is_machining" :value="scope.row.dictOutsidePurchase" />
        </template>
      </el-table-column>
      <el-table-column label="数量" align="left" prop="basicDosage" />
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import * as componentApi from '@/api/componentApi'
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  productNumber: undefined,
  partType: undefined,
  drawingNumber: undefined
})
const total = ref(0) // 列表的总页数
const list = ref([])
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const operationIndex = ref(0)
const open = async (obj: Object) => {
	console.log('obj',obj)
  operationIndex.value = obj.index,
	queryParams.productNumber = obj.productNumber
	queryParams.partType = obj.partType
  if(obj.list){
     multipleSelection.value = obj.list
  }
  dialogVisible.value = true
  resetForm()
  getList()
}

const emit = defineEmits(['slectRes'])

// 确认
const submitForm = () => {
  if (multipleSelection.value.length > 1) {
    message.notifyError('只能选择一条数据')
    return
  }
  dialogVisible.value = false
  const data = {
    index:operationIndex.value,
    list:multipleSelection.value
  }
  emit('slectRes', data)
  multipleTableRef.value!.clearSelection()
}

// 获取列表
const getList = async () => {
  formLoading.value = true
  const res = await componentApi.getDrawingNumberList(queryParams)
  list.value = res.list
  if(multipleSelection.value.length){
    multipleSelection.value.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(row, true)
    })
  }
  total.value = res.total
  formLoading.value = false
}

// 搜索
const handleQuery = async () => {
  queryParams.pageNo = 1
  getList()
}

// 重置按钮
const resetQuery = () => {
  formRef.value.resetFields()
  handleQuery()
}

// 多选赋值
const multipleSelection = ref([])
const multipleTableRef = ref()
const handleSelectionChange = (val) => {
  
  if(val.length > 1){
    multipleTableRef.value!.clearSelection()
    const data = JSON.parse(JSON.stringify(val.at(-1)))
    multipleSelection.value = [data]
    list.value.forEach(item => {
      if(item.sourceId == data.sourceId){
        multipleTableRef.value!.toggleRowSelection(item, true)
      }
    })
  }else{
    multipleSelection.value = val
  }
  
}

defineExpose({ open, multipleSelection }) // 提供 open 方法，用于打开弹窗

// 重置表单
const resetForm = () => {
  formRef.value?.resetFields()
}
</script>
<style lang="scss" scoped>
.mb {
  margin-bottom: 20px;
}

.pagination::after {
  content: '';
  display: block;
  clear: both;
  height: 0;
}
</style>
